<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/site.css">
    <script src="js/viewport.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/public.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
</head>

<body>
<div id="app">
    <header class="padding-35">
        <div class="logo">
            <img src="imgs/logo.png" alt="">
        </div>
        <div class="menu">
            <img src="imgs/menu.png" alt="">
        </div>
    </header>
    <div class="mbx padding-35">
        <a href="index.html">健康美食网</a>
        <i class="iconfont icon-arrow-right-copy-copy"></i>
        <span>健康生活</span>
    </div>
    <div class="itemBanner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="content padding-35">
        <div class="contentNewType clearfix">
            <div class="newsList">
                <ul>
                    <li v-for="a in article">
                        <img class="fl" :src="a.aimg" alt="">
                        <div class="newsItem" @click.prevent="tz('articleDetail.html?cid=',a.aid)">
                            <p>{{a.aname}}</p>
                            <p>
                                <span><i class="iconfont icon-yonghu"></i>{{a.author}}</span>
                                <span class="fr">{{a.atime}}</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="news">
            <div class="newsTit">
                <span>分类导航</span>
                <a class="fr" href="javascript:;">更多<i>&gt;</i></a>
            </div>
            <div class="typeNav">
                <ul class="clearfix">
                    <li v-for="a in article" style="width: 120px;height: 40px">
                        <a href="javascript:;" @click.prevent="tz('articleDetail.html?cid=',a.aid)">{{a.aname.substring(0,6)}}</a>
                    </li>
                </ul>
            </div>

        </div>

<!--        <div class="news">-->
<!--            <div class="newsTit">-->
<!--                <span>热门食谱</span>-->
<!--                <a class="fr" href="javascript:;">更多<i>></i></a>-->
<!--            </div>-->
<!--            <div class="newsList">-->
<!--                <ul>-->
<!--                    <li>-->
<!--                        <img class="fl" src="imgs/meishilist1.jpg" alt="">-->
<!--                        <div class="newsItem">-->
<!--                            <p>五彩虾仁炒饭</p>-->
<!--                            <p>-->
<!--                                <span><i class="iconfont icon-yonghu"></i> 家家</span>-->
<!--                                <span class="fr">2019-04-28</span>-->
<!--                            </p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <img class="fl" src="imgs/meishilist2.jpg" alt="">-->
<!--                        <div class="newsItem">-->
<!--                            <p>爱心满满的黑椒蔬菜牛排</p>-->
<!--                            <p>-->
<!--                                <span><i class="iconfont icon-yonghu"></i> 家家</span>-->
<!--                                <span class="fr">2019-04-28</span>-->
<!--                            </p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <img class="fl" src="imgs/meishilist3.jpg" alt="">-->
<!--                        <div class="newsItem">-->
<!--                            <p>鲜活时蔬面</p>-->
<!--                            <p>-->
<!--                                <span><i class="iconfont icon-yonghu"></i> 家家</span>-->
<!--                                <span class="fr">2019-04-28</span>-->
<!--                            </p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <img class="fl" src="imgs/meishilist4.jpg" alt="">-->
<!--                        <div class="newsItem">-->
<!--                            <p>减肥餐！苦瓜酿肉</p>-->
<!--                            <p>-->
<!--                                <span><i class="iconfont icon-yonghu"></i> 家家</span>-->
<!--                                <span class="fr">2019-04-28</span>-->
<!--                            </p>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
        </div>
    </div>
    <footer>
        <p>版权所有：版权所有：健康美食网 WWW.JKMEISHI.COM</p>
        <p>Copyright 2011-2018 备案号:鄂ICP备11013833号-4</p>
    </footer>
</div>
    <script>
        // var swiper = new Swiper('.swiper-container', {
        //     loop: true,
        //     autoplay: {
        //         delay: 2500,
        //         disableOnInteraction: false,
        //     }
        // });
        // let bra_se = document.querySelector("")
        let bra_se = document.querySelector(".swiper-container div");
        let img_index = 1;
        // 启动定时器
        window.setInterval(()=>{
            //transition-duration   属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。
            // transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
            bra_se.style.cssText = `transition-duration: 0.8s; transform: translateX(-${100*img_index}vw);left: 0px;`;
            if( img_index % 3 == 0 ){
                img_index = 0;
                setTimeout(()=>{
                    bra_se.style.cssText = `transform: translateX(0vw);left: 0px`;
                }, 1500);
            }
            img_index++;
        }, 3500);
        var v = new Vue({
            el : "#app",
            data : {
                article: {}
            },
            created(){
                this.queryArticle();
            },
            methods:{
                queryArticle(){
                    axios.post("healthy/article/querybytype").then(res=>{
                        this.article = res.data.data;
                        console.log(this.article);
                    })
                },
                tz(detail,id) {
                    // location.href ="cuisineDetail.html?cid="+id;
                    location.href = detail + id;
                }
            }
        })
    </script>
</body>

</html>